<template>
  <div class="ChinaChart" :id="id" :style="styles"></div>
</template>

<script>
import { getDetailsCount, getDetailsList } from '@/api/echarts'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/visualMap')
require('echarts/lib/chart/map')
require('echarts/lib/component/geo')
import china from '../assets/maps/china.json'

export default {
  name: 'ChinaChart',
  props: {
    id: {
      type: String,
      default: 'ChinaChart'
    },
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    chartData: Array
  },
  data() {
    return {
      styles: {
        height: this.height,
        width: this.width
      }
    }
  },
  mounted() {
    getDetailsList().then(res => {
      console.log('res', res)
      if (res.code == 200) {
        this.draw(res.data)
      }
    })
  },
  methods: {
    draw(data) {
      let dataList = data
      console.log('= this.chartData', data)
      dataList = JSON.parse(JSON.stringify(dataList).replace(/count/g, 'value'))
      dataList = JSON.parse(JSON.stringify(dataList).replace(/province/g, 'name'))
      console.log('dataList', dataList)
      let option = {
        title: {
          text: '各省份累计确诊人数',
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#fff',
            textBorderWidth: '2',
            fontSize: 20
          }
        },
        tooltip: {
          show: true,
          enterable: false,
          trigger: 'item',
          showContent: true,
          formatter: function (params) {
            if (params.value) {
              return '累计确诊' + '<br/>' + params.name + ' : ' + params.value
            } else {
              return '累计确诊' + '<br/>' + params.name + ' : ' + '0'
            }
          }
        },
        visualMap: {
          min: 0,
          max: 150,
          left: 'right',
          top: 'center',
          // text: ["高", "低"], //取值范围的文字
          inRange: {
            // color: ["#d984f3", "#450558"], //取值范围的颜色
            color: ['#FFF', '#fe010b'] //取值范围的颜色
          },
          show: false //图注
          // pieces: [//地图左下角显示可视化
          //   {min: 10000,color:'#D1241A'}, // 不指定 max，表示 max 为无限大（Infinity）。
          //   {min: 1000, max: 9999,color:'#F27152'},
          //   {min: 100, max: 999,color:'#F28E52'},
          //   {min: 10, max: 99,color:'#F2B252'},
          //   {min: 1, max: 9,color:'#A5A5A5'},
          //   {value: 0}, // 表示 value 等于 0 的情况。
          // ]
        },
        geo: {
          map: 'china',
          roam: true, //不开启缩放和平移
          zoom: 1.23, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)'
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#8555a822',
              shadowColor: '#8555a8'
              // shadowBlur: 5,
            },
            emphasis: {
              areaColor: '#d984f3', //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: dataList
          }
        ]
      }
      let myChart = echarts.init(document.getElementById('ChinaChart'))
      echarts.registerMap('china', china)
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" ></style>
